<template>
  <div>
    <div class="filter-container" style="margin-bottom: 10px">
      <el-input
        style="width: 50%"
        class="input-with-select"
        placeholder="请输入技师手机号码" 
        v-model="search"
        @keyup.enter.native="query()"
      >
      </el-input>
      <el-button
          class="filter-item"
          type="primary"
          slot="append"
          icon="el-icon-search"
          @click="sou"
          
        >
          搜索
        </el-button>
    </div>
    <el-table
      :data="tableData" 
      style="width: 99%" 
      border="true"
      stripe="true" 
      :header-cell-style="{background:'#eef1f6',color:'#606266'}" 
      max-height="800px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="执业类型">
              <span
                ><el-tooltip placement="top" effect="light">
                  <div slot="content">
                    <el-card
                      :body-style="{ padding: '0px' }"
                      v-for="(item, i) in props.row.doc_type"
                      :key="i"
                      style="display: inline-block; margin: 10px"
                    >
                    <el-image 
                      @click="show(item.img)"
                      :preview-src-list="showimg"
                      :src="item.img"
                      style="width: 300px"
                      ></el-image>
                      <div style="padding: 14px">
                        <span class="typename"
                          >执业类型：{{ item.type.name }}</span
                        >
                        <div class="bottom clearfix">
                          <time class="time"
                            >获得资格证时间：{{ item.auth_time }}</time
                          >
                        </div>
                      </div>
                    </el-card>
                  </div>
                  <el-button class="typebtn">悬停查看</el-button>
                </el-tooltip></span
              >
            </el-form-item>
            <el-form-item label="注册时间">
              <span>{{ props.row.user.cTime }}</span>
            </el-form-item>
            <el-form-item label="身份证号码">
              <span>{{ props.row.user.card }}</span>
            </el-form-item>
            <el-form-item label="身份证照片">
              <span class="idcardbox">
                <el-image
                  :src="domain + props.row.user.cert_a"
                  fit="contain"
                  class="idc"
                  @click="show(domain + props.row.user.cert_a)"
                  :preview-src-list="showimg"
                ></el-image>
                <el-image
                fit="contain"
                  :src="domain + props.row.user.cert_b"
                  class="idc"
                  @click="show(domain + props.row.user.cert_b)"
                  :preview-src-list="showimg"
                ></el-image>
              </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>

      <el-table-column
        prop=""
        label="序号"
        width="50"
        align="center"
      >
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column><el-table-column label="头像" align="center" width="150">
        <template slot-scope="x">
          <el-image style="width:20px;height:20px;" :src="x.row.photo"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="user.name" label="用户名" width="100" align="center">
      </el-table-column>
      <el-table-column prop="user.sex" label="性别" width="120" align="center">
      </el-table-column>

      <el-table-column
        prop="user.tel"
        label="手机号"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="job_address"
        label="职业地点"
        width="150"
        align="center"
      >
      </el-table-column>

      

      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="yes(scope.$index, scope.row)"
            >同意</el-button
          >
          <el-button type="danger" @click="no(scope.$index, scope.row)"
            >拒绝</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagectn">
      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="pages"
        @current-change="pagechange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { deletedoctype,getdoctor, doctornum, updatedoctor,updateuser,deletedoctor } from "@/api/user/user.js";
export default {
  data() {
    var $domain = process.env.VUE_APP_BASE_API;
    return {
      tableData: [],
      search: "",
      pages: 0,
      domain: $domain,
      thispage: 1,
      showimg:[$domain]
    };
  },
  created() {
    this.requestdoctor(1);
    this.requestpage();
  },
  methods: {
    show(img){
      this.showimg[0]=img
    },
    yes(index, row) {
      let that = this;
      this.$confirm("此操作将同意该技师申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateuser({
            field:"u_id",
            value:row.u_id,
            auth_status:2,
            role:"doctor"
          })
          updatedoctor({
            field:"doc_id",
            value:row.doc_id,
            status:1
          }).then(()=>{
            this.$message({
              type: "success",
              message: "已同意!",
            });
            this.requestdoctor(that.thispage);
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    no(index, row) {
      let that = this;
      this.$confirm("此操作将拒绝该技师申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateuser({
            field:"u_id",
            value:row.u_id,
            auth_status:0,
            role:"user"
          })
          deletedoctype({
            field:"doc_id",
            op:"=",
            value:row.doc_id,
          })
          deletedoctor({
            field:"doc_id",
            op:"=",
            value:row.doc_id,
          }).then(()=>{
            this.$message({
              type: "success",
              message: "已拒绝!",
            });
            this.requestdoctor(that.thispage);
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    sou() {
      var that = this;
      var data = {
        field: "tel",
        value: that.search,
        op: "=",
      };
      getdoctor(data).then((res) => {
        that.tableData = res;
        console.log(res);
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    requestdoctor(pages) {
      var that = this;
      var data = {
        field: "status",
        value: "0",
        op: "=",
        order_by: "cTime",
        page: pages,
      };
      getdoctor(data).then((res) => {
        that.tableData = res;
        console.log(res);
      });
    },
    // openRoute(e) {
    //     console.log('跳转', e)
    //     var id = e.user.u_id
    //     var docid = e.doc_id
    //     var tel = e.user.tel
    //     this.$router.push({
    //         path: 'info',
    //         query: { id, docid, tel }
    //     })
    // },
    requestpage() {
      var that = this;
      var data = {
        field: "status",
        op: "=",
        value: "0",
      };
      doctornum(data).then((res) => {
        that.pages = res;
      });
    },
    pagechange(page) {
      this.requestdoctor(page);
      this.thispage = page;
    },
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-bottom: 0;
  width: 100%;
  white-space: pre-line;
}
.idc {
  margin-right: 15px;
  width: 40%;
  height: 300px;
}
.pagectn {
  width: 100%;
  background-color: #fff;
  padding: 5px;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
.idcardbox{
  display: flex;
}
</style>
